<template>
	<view class="content">
		<!-- ***********f1 轮播图 **************-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" >
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/aaa.jpg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/aaa.jpg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/aaa.jpg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/aaa.jpg"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- ***********f2 本周精选************** -->
		<indexTitle :title1="title.title1" :title2="title.title2" @clickTitle="clickTitle1('/pages/index/concentration')"></indexTitle>
		<view class="week" @click="jump('/pages/index/information')">
				<card1 v-for="item in 3"></card1>
		</view>
		<!-- ***********f3 主题游玩************** -->
		<indexTitle :title1="title.title3" :title2="title.title2" @clickTitle="clickTitle2('/pages/index/theme')" ></indexTitle>
		<view class="them">
					<card2></card2>
					<view class="them-item">
						<card3 v-for="item in 6" class="them-item-card"></card3>
					</view>
		</view>
		<!-- ***********f4 精选游记************** -->
		<indexTitle :title1="title.title4"></indexTitle>
		<view class="select">
			<card4 class="card"></card4>
		</view>
	</view>
</template>

<script>
	import indexTitle from "../../components/index/indexTitle.vue"
	import card1 from "../../components/index/card1.vue"
	import card2 from "../../components/index/card2.vue"
	import card3 from "../../components/index/card3.vue"
	import card4 from "../../components/travels/travels.vue"
	export default {
		components:{indexTitle,card1,card2,card3,card4},
		data() {
			return {
				title:{title1:"本周精选",title2:"查看更多",title3:"主题游玩",title4:"精选游记"},
			}
		},
		onLoad() {

		},
		methods: {
			clickTitle1(url){
				uni.navigateTo({
					url
				})
			},
			clickTitle2(url){
				uni.navigateTo({
					url
				})
			},
			jump(url){
				uni.navigateTo({
					url
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.swiper{
		height: 838rpx;
		margin:10rpx 0;
	}
	.swiper-item>image{
		width: 720rpx;
		height: 838rpx;
		margin: 0 auto;
		border-radius: 16rpx;
	}
 /deep/.uni-swiper-dots{
	 position: absolute;
		bottom: 20rpx;
		left: 630rpx;
	}
	.week{
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top: 15rpx;
	}
	.them{
		width: 720rpx;
		margin: 0 auto;
		margin-top: 15rpx;
		display: flex;
		flex-direction: column;
		.them-item{
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.them-item-card{
				margin-top: 15rpx;
			}
		}
	}
	.select{
		width: 720rpx;
		margin: 0 auto;
		margin-top: 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.card{
			width: 350rpx;
		}
	}
</style>
